<template>

  <div class="DataBoard_container main_container">

    <div class="main_header">
      <div class="padding_container">
        <div class="left"><Breadcrumb /></div>
        <div class="right">
          <a class="right_setting" @click="setup">
            <svg-icon icon-class="设置" />
          </a>
        </div>
      </div>
    </div>
    <div class="DataBoard_container_main">
      <div class="DataBoard_container_main_statistics">
        <div v-for="(item,index) in showStatisticsItem.filter(item=>item.isShow==true||item.isShow==undefined)" :key="index" class="statistics_item">
          <div class="statistics_item_icon" :style="{backgroundColor:item.bgColor}"><svg-icon :icon-class="item.icon" /></div>
          <div class="statistics_item_number">{{ statisticsData[item.dataKey] }}</div>
          <div class="statistics_item_background1" />
          <div class="statistics_item_background" />
          <div class="statistics_item_name">{{ item.name }}</div>
        </div>
      </div>
      <div class="DataBoard_container_main_charts">
        <div v-for="(item,index) in showChartItem.filter(item=>(item.isShow==true||item.isShow==undefined)&&item.component)" :key="index" class="charts_item" :class="item.length?'double':''">
          <LocationDistribution v-if="item.component=='LocationDistribution'" />
          <MaintainPlanTimelinessRate v-if="item.component=='MaintainPlanTimelinessRate'" />
          <CheckPlanCompletedRatio v-if="item.component=='CheckPlanCompletedRatio'" />
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import { deviceHeadDate } from '@/api/equipmentManage/equipmentReport/dataBoard' // 接口
import LocationDistribution from './components/LocationDistribution'
import MaintainPlanTimelinessRate from './components/MaintenanceCostStatistics'
import Setup from './components/Setup'
import { getPageSettings } from '@/api/common/common'
import { mapGetters } from 'vuex'
export default {
  name: 'DataBoard',
  components: {
    LocationDistribution,
    MaintainPlanTimelinessRate

  }, // 组件注册
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  data() {
    return {
      capacityNumber: 100,
      OEENumber: 100,
      timer: undefined,
      id: '',
      statisticsItem: [ // 可选的统计数据项
        { name: '登录地区占比', component: 'LocationDistribution' },
        { name: '用户登录次数统计', component: 'MaintainPlanTimelinessRate' }
      ],
      chartItem: [// 可选的图表项
        { name: '登录地区占比', component: 'LocationDistribution' },
        { name: '用户登录次数统计', component: 'MaintainPlanTimelinessRate' }
      ],
      statisticsData: {},
      pageId: '超管数据看板',
      showStatisticsItem: [], // 真正展示的统计数据项
      showChartItem: [] // 真正展示的图表项
    }
  },
  mounted() {
    this.getPageSettings()
    this.getStatisticsData()
    this.timer = setInterval(() => {
      this.getStatisticsData()
    }, this.$store.state.common.refreshFrequency * 1000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    // 获取顶部统计数据
    getStatisticsData() {
      deviceHeadDate().then(res => {
        this.statisticsData = res.data
      })
    },
    // 设置
    setup() {
      this.$layer.iframe({
        // 弹框
        content: {
          content: Setup, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            settingData: {
              StatisticsItem: this.showStatisticsItem, // 显示设置的数据
              ChartItem: this.showChartItem, // 字段搜索的数据
              id: this.id,
              pageId: this.pageId // 页面唯一标识
            }
          } // props
        },
        area: ['660px', '800px'],
        title: '看板设置', // 标题
        shadeClose: false // 点击遮罩是否关闭
      })
    },
    getPageSettings() {
      getPageSettings({ userId: this.userId, pageId: this.pageId }).then(res => {
        if (res.data.json) {
          const pageSetings = res.data.json

          this.showStatisticsItem = pageSetings.StatisticsItem
          this.showChartItem = pageSetings.ChartItem

          this.id = res.data.id
        } else {
          this.showStatisticsItem = this.$deepClone(this.statisticsItem)
          this.showChartItem = this.$deepClone(this.chartItem)
        }
        this.OEENumber = this.showChartItem.filter(item => item.component == 'OEESequenceDiagram')[0].number
        this.capacityNumber = this.showChartItem.filter(item => item.component == 'CapacityStatistics')[0].number
      })
    }
  }
}
</script>

  <style lang="less" scoped>
  .DataBoard_container{
    //box-shadow: inset 0px 0px 12px 0px rgba(29, 65, 134, 0.18);
   background-color: #f7f8fa;
    //background-color: #5a5e66;
    overflow-y: auto;
    .right_setting{
      font-size: 20px;
    }
    .DataBoard_container_main{
      padding: 10px 20px 20px 20px;
    }

    .DataBoard_container_main_statistics{
      width: 100%;
      display: flex;

      .statistics_item{
        width: 282px;
        height: 100px;
        border-radius: 4px;
        margin-left: 20px;

        .statistics_item_background1{
          width: 100%;
          height: 30px;
        }
        .statistics_item_background{
          width: 100%;
          height: 70px;
          background-color: white;
          border-radius: 4px;
        }
        .statistics_item_icon{
          width: 56px;
          height: 56px;
          border-radius: 50%;
          background-color: rgba(255, 201, 201, 1);
          float: left;
          left: 20px;
          position: relative;
          font-size: 26px;
          display: flex;justify-content: center;align-items: center;
        }
        .statistics_item_number{
          float: right;
          right: 20px;
          position: relative;
          color: rgba(51, 51, 51, 1);
          font-size: 36px;
          height: 60px;
          line-height: 60px;
        }
        .statistics_item_name{
          float: right;
          right: 20px;
          position: relative;
          color: rgba(153, 153, 153, 1);
          font-size: 18px;
          top: -35px;
        }
      }

      .statistics_item:first-child{
        margin-left: 0px;
      }
    }

    .DataBoard_container_main_charts{
      width: 100%;
      display: flex;flex-wrap: wrap;justify-content: space-between;

      .charts_item{
        width: calc(50% - 10px);
        background-color: white;
        height: 310px;
        margin-top: 20px;
        border-radius: 4px;
      }
      .charts_item.double{
        width: 100%;
      }

    }

  }
  </style>
